<template>
  <div class="container">
    <div class="content-container">
      <div class="practise-container">
        <!--
        <div class="practise-index">
          {{ practiseDetail.index + 1 }}
        </div>
        -->
        <div class="content">
          <h4>{{ groupDetail.chapterName }}</h4>
          <div class="details">
            <span>{{ groupDetail.groupingCount }}名成员</span>
          </div>
        </div>
      </div>
      <div class="personal-center">
        <div class="center-grid">
          <div class="center-item">
            <p class="tip">完成度</p>
            <p class="content blue">{{ groupDetail.studentSubRate }}%</p>
          </div>
          <div class="center-item">
            <p class="tip">平均得分</p>
            <p class="content green">{{ groupDetail.submitAverageScore }}</p>
          </div>
          <div class="center-item">
            <p class="tip">提交人数</p>
            <p class="content puple">{{ groupDetail.submitCount }}</p>
          </div>
        </div>
      </div>
      <div class="current-progress">
        <div class="flex-container">
          <h3><strong>当前进度</strong></h3>
          <div class="progress-percentage">{{ groupDetail.studentSubRate }}%</div>
        </div>
        <div>
          <van-progress
            :percentage="groupDetail.studentSubRate"
            stroke-width="8"
            :show-pivot="false"
          />
        </div>
      </div>
    </div>
    <!--
    <div class="practise-goal">
      <h3><strong>练习目标</strong></h3>
      <div class="content">{{ groupDetail.chapterDescription }}</div>
    </div>
    -->
    <!-- 课程学情分析 -->
    <div class="course-analysis">
      <div class="analysis-header">
        <!-- <van-icon name="bar-chart-o" size="20" /> -->
        <h3><strong>小组成员</strong></h3>
      </div>
      <div class="analysis-list">
        <div
          class="analysis-item"
          v-for="item in studentList"
          :key="item.studentId"
          @click="toStudentDetail(item)"
        >
          <div class="analysis-content">
            <!--<img src="@/assets/img/course1.png" alt="课程" class="course-img" />-->
            <img v-if="item.avatarPath" :src="item.avatarPath" alt="课程" class="course-img" />
            <div v-else class="default-img">{{ item.studentName }}</div>
            <div>
              <h4>{{ item.studentName }}</h4>
              <div class="details">
                <span>学号：{{ item.studentNo }}</span>
              </div>
            </div>
          </div>
          <div class="score-content">
            <div>
              <div class="score">{{ item.score }}分</div>
              <div class="status">
                <span :class="getStatusClass(item.submitFlag)">{{
                  getStatusText(item.submitFlag)
                }}</span>
              </div>
            </div>
            <div>
              <van-icon name="arrow" class="arrow-icon" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter, useRoute } from 'vue-router'
import useUserStore from '@/stores/user'
import { getStudentGroupDetailRequest } from '@/api/course'
import defaultAvatar from '@/assets/img/icon.png'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const userInfo = userStore.userInfo

const practiseDetail = ref({
  index: '0',
})
const studentList = ref([])
const groupDetail = ref({})
const getStatusClass = (status: string) => {
  return {
    '0': 'not-started',
    '1': 'in-progress',
    // '2': 'completed',
  }[status]
}
const getStatusText = (status: string) => {
  return {
    '0': '未提交',
    '1': '已提交',
    // '2': '已完成',
  }[status]
}
const getPractiseDetail = async () => {
  const params = {
    groupingId: route.query.groupingId,
  }
  const res = await getStudentGroupDetailRequest(params)
  groupDetail.value = res.data
  studentList.value = res.data.groupSubmitListVo
}

const toStudentDetail = (item) => {
  router.push(
    `/studentPractiseDetail?groupingId=${groupDetail.value.groupingId}&studentId=${item.studentId}`,
  )
}
onActivated(() => {
  practiseDetail.value.index = route.query.index
  getPractiseDetail()
})
</script>

<style scoped>
.container {
  padding: 15px;
  /* background: #f7f8fa; */
  min-height: 90vh;
}
.content-container {
  border: 1px solid #f5f5f5;
  border-radius: 8px;
  padding: 10px;
}
.practise-container {
  display: flex;
  align-items: center;
  /* padding: 15px; */
  /* border-bottom: 1px solid #f5f5f5; */
  .practise-index {
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border-radius: 18px;
    background: #dbeafe;
    font-size: 12px;
    color: #3b82f6;
    margin-right: 10px;
  }
}

/* .avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 15px;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
} */

.info {
  text-align: center;
}

.name {
  font-size: 18px;
  margin: 10px 0;
  font-weight: bold;
}

.details {
  font-size: 14px;
  color: #666;
  .van-icon-clock {
    margin-right: 3px;
    color: #3b82f6;
  }
  .van-icon-user {
    color: #22c55e;
    margin-left: 8px;
    margin-right: 3px;
  }
}

/* .personal-center,
.practise-goal {
  margin: 20px 0;
} */

.personal-center h3,
.practise-goal h3,
.current-progress h3 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
}

.practise-goal {
  margin: 20px 0;
  border: 1px solid #f5f5f5;
  border-radius: 8px;
  padding: 10px;
  .content {
    color: #4b5563;
    font-size: 12px;
  }
}
.center-grid {
  display: flex;
  gap: 15px;
  padding: 20px 0px;
  justify-content: space-between;
}

.center-item {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  .tip {
    color: #6b7280;
    font-size: 12px;
    font-weight: normal;
  }
  .content {
    font-size: 16px;
    font-weight: bold;
    &.blue {
      color: #3b82f6;
    }
    &.green {
      color: #22c55e;
    }
    &.puple {
      color: #a855f7;
    }
  }
}

.center-item p {
  font-size: 12px;
  font-weight: bold;
}
.flex-container {
  display: flex;
  justify-content: space-between;
}
.current-progress {
  margin: 20px 0;
  .progress-percentage {
    color: #3b82f6;
    font-size: 14px;
  }
}

.course-analysis {
  margin: 20px 0;
  border: 1px solid #f5f5f5;
  border-radius: 8px;
  padding: 10px;
}

.course-analysis h3 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
}
.analysis-list {
  width: 100%;
}

.analysis-item {
  display: flex;
  justify-content: space-between; /* 左右两端对齐 */
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.analysis-content {
  display: flex;
  align-items: center;
  gap: 10px; /* 图片和文字的间距 */
  flex: 1; /* 占据左侧所有可用空间 */
  h4 {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 5px;
  }
  .default-img {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    margin-right: 15px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d9d9d9;
    margin-bottom: 15px;
  }
}

.details span {
  color: #666;
  font-size: 12px;
}

.score-content {
  display: flex;
  align-items: center;
  gap: 10px; /* 分数和箭头的间距 */
  .score {
    font-size: 14px;
    color: #3b82f6;
    margin-bottom: 5px;
  }
  .status {
    font-size: 12px;
    &.completed {
      color: #22c55e;
    }
    &.in-progress {
      color: #eab308;
    }
    &.not-started {
      color: #6b7280;
    }
  }
  .arrow-icon {
    color: #3b82f6;
    font-size: 16px;
  }
}

.course-img {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  margin-right: 15px;
  object-fit: cover;
}

.content {
  flex: 1;
}

.content h4 {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
}

.content p {
  font-size: 12px;
  color: #666;
}
</style>
